<template>
  <el-row :gutter="20">
    <el-col :span="5">
      <div class="grid-content bg-purple" style="height: 870px">
        <el-card class="box-card" style="height: 870px">
          <div style="height: 600px">
            <el-steps
              direction="vertical"
              :active="active"
              finish-status="success"
              align-center
            >
              <el-step title="选择模板"></el-step>
              <el-step title="基本信息"></el-step>
              <el-step title="内容提要"></el-step>
              <el-step title="创建成功"></el-step>
            </el-steps>
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="19">
      <div class="grid-content bg-purple">
        <el-card class="box-card" style="height: 870px">
          <h3 v-if="active == 0">请选择模板:</h3>
          <h3 v-if="active == 1">请填写数据:</h3>
          <h3 v-if="active == 2">请填写数据:</h3>
          <!-- 第一步 选择模板 -->
          <div v-if="active == 0" class="radio_btn" style="">
            <el-radio
              v-for="(item, index) in radioList"
              :key="index"
              v-model="XZMB"
              :label="item"
              border
              size="medium"
              >{{ item }}</el-radio
            >
          </div>
          <!-- 第二部 基本信息 -->
          <div v-if="active == 1" class="box_form">
            <el-form
              :model="ruleFormNB2"
              :rules="rules2"
              ref="ruleFormNB2"
              label-width="100px"
              class="demo-ruleFormNB2"
            >
              <el-row :gutter="20">
                <el-col :span="10">
                  <div class="grid-content bg-purple">
                    <el-form-item label="工单编号：" prop="BH">
                      <el-input v-model="ruleFormNB2.BH"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="10">
                  <div class="grid-content bg-purple">
                    <el-form-item label="主送部门：" prop="region">
                      <el-select
                        v-model="ruleFormNB2.region"
                        multiple
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in region"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>

                      <!-- <el-select
                        v-model="ruleFormNB2.region"
                        placeholder="请选择"
                      >
                        <el-option label="变电检修" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select> -->
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="10">
                  <div class="grid-content bg-purple">
                    <el-form-item label="工单标题：" prop="BT">
                      <el-input v-model="ruleFormNB2.BT"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="14">
                  <div class="grid-content bg-purple">
                    <el-form-item label="审核专业：" prop="SH">
                      <el-select
                        v-model="ruleFormNB2.SH"
                        multiple
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in SH"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-form-item
                      label="签发人："
                      prop="QFR"
                      style="width: 170px"
                    >
                      <div>
                        <el-input v-model="ruleFormNB2.QFR"></el-input>
                      </div>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-form-item label="提醒周期:">
                      <div>
                        <el-radio-group
                          v-model="ruleFormNB2.TXZQ"
                          fill="#777777"
                        >
                          <el-radio-button label="日"></el-radio-button>
                          <el-radio-button label="周"></el-radio-button>
                          <el-radio-button label="月"></el-radio-button>
                        </el-radio-group>
                      </div>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="14">
                  <div class="grid-content bg-purple">
                    <el-form-item label="工单分类：" prop="GDFL">
                      <el-select
                        v-model="ruleFormNB2.GDFL"
                        multiple
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in GDFL"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="起始时间：" prop="initDate">
                      <el-date-picker
                        v-model="ruleFormNB2.initDate"
                        type="date"
                        placeholder="请选择"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-form-item label="结束时间：" prop="overDate">
                      <el-date-picker
                        v-model="ruleFormNB2.overDate"
                        type="date"
                        placeholder="请选择"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!-- 第三部 内容提要 -->
          <div v-if="active == 2" class="box_form">
            <el-form
              :model="ruleFormNB3"
              :rules="rules3"
              ref="ruleFormNB3"
              label-width="100px"
              class="demo-ruleFormNB3"
              label-position="top"
            >
              <el-form-item label="风险分析：" prop="FXFX">
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="ruleFormNB3.FXFX"
                ></el-input>
              </el-form-item>
              <el-form-item label="工作措施及要求：" prop="GZCS">
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="ruleFormNB3.GZCS"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注信息：" prop="BZXX" style="width: 200px">
                <el-input
                  type="textarea"
                  :rows="5"
                  v-model="ruleFormNB3.BZXX"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 第五步 创建成功 -->
          <div
            v-if="active == 3 || active == 4"
            class="box_form"
            style="text-alen: center"
          >
            <h3 style="margin-left: 242px">
              {{ active === 4 ? "工单生成完成" : "工单生成中，请稍后" }}
            </h3>
            <img :src="zngdbgc_img" alt="" />
          </div>
          <el-button
            v-if="active != 0"
            style="margin-top: 12px"
            @click="nextLast"
            type="primary"
            >上一步</el-button
          >
          <el-button
            v-if="active != 4"
            style="margin-top: 12px"
            @click="next"
            type="primary"
            >下一步</el-button
          >
          <el-button
            v-if="active == 4"
            style="margin-top: 12px"
            @click="nextOver"
            type="primary"
            >完成</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="backAgentWork"
            style="position: absolute; top: 20px; right: 30px"
            >返回</el-button
          >
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { addList } from "@/api/zngd.js";
import axios from "axios";
import qs from "qs";
// 提交工单
export default {
  name: "submitWork",

  data() {
    return {
      // 主送部门
      region: [
        {
          value: "变电检修",
          label: "变电检修",
        },
        {
          value: "输电检修",
          label: "输电检修",
        },
        {
          value: "运检部",
          label: "运检部",
        },
        {
          value: "变电二次",
          label: "变电二次",
        },
      ],
      // 审核专业
      SH: [
        {
          value: "变电检修",
          label: "变电检修",
        },
        {
          value: "输电检修",
          label: "输电检修",
        },
        {
          value: "运检部",
          label: "运检部",
        },
        {
          value: "变电二次",
          label: "变电二次",
        },
      ],
      // 工单分类
      GDFL: [
        {
          value: "变电检修",
          label: "变电检修",
        },
        {
          value: "输电检修",
          label: "输电检修",
        },
        {
          value: "运检部",
          label: "运检部",
        },
        {
          value: "变电二次",
          label: "变电二次",
        },
      ],
      zngdbgc_img: require("@/assets/zngdImg/zngdbgc_img.png"),
      active: 0, //步骤索引
      XZMB: "",
      radioList: [" 保电特训", "天气预警", "工作督办"],
      // 第二部表单
      ruleFormNB2: {
        BH: "", //工单编号
        region: "", //主送部门
        BT: "", //工单标题
        SH: "", //审核专业
        QFR: "", //签发人
        TXZQ: "日", //提醒周期
        GDFL: "", //工单分类
        initDate: "", //起始期间
        overDate: "", //结束时间
      },
      //第三部表单
      ruleFormNB3: {
        FXFX: "",
        GZCS: "",
        BZXX: "",
      },
      rules2: {
        BH: [{ required: true, message: "请输入工单编号：", trigger: "blur" }],
        BT: [{ required: true, message: "请输入工单标题：", trigger: "blur" }],
        BM: [{ required: true, message: "请选择部门", trigger: "blur" }],
        SH: [{ required: true, message: "请选择审核专业", trigger: "blur" }],
        QFR: [{ required: true, message: "请输入签发人：", trigger: "blur" }],
        GDFL: [{ required: true, message: "请选择工单分类", trigger: "blur" }],
        region: [
          { required: true, message: "请选择主送部门", trigger: "blur" },
        ],
        initDate: [
          {
            required: true,
            message: "请选择起始日期",
            trigger: "change",
          },
        ],
        overDate: [
          {
            required: true,
            message: "请选择结束日期",
            trigger: "change",
          },
        ],
      },
      rules3: {
        FXFX: [{ required: true, message: "请填写信息", trigger: "blur" }],
        GZCS: [{ required: true, message: "请填写信息", trigger: "blur" }],
        BZXX: [{ required: true, message: "请填写信息", trigger: "blur" }],
      },
    };
  },

  mounted() {},

  methods: {
    // 下一步
    next() {
      // if (this.active++ > 4) this.active = 0;
      switch (this.active) {
        case 0:
          if (!this.XZMB) {
            this.$message({
              showClose: true,
              message: "请选择模板",
              type: "warning",
            });
          } else {
            console.log(this.XZMB, "0");
            this.active++;
          }
          break;
        case 1:
          this.$refs.ruleFormNB2.validate((valid) => {
            if (valid) {
              console.log(this.ruleFormNB2, "1");
              this.active++;
            } else {
              this.$message({
                showClose: true,
                message: "请将数据填写完整",
                type: "warning",
              });
            }
          });

          break;
        case 2:
          this.$refs.ruleFormNB3.validate((valid) => {
            if (valid) {
              this.active++;

              var lists = {
                // cg: "string", //
                // cgCreateTime: "string",
                // cgEndTime: "string",
                // clz: "string",
                // clzCreteTime: "string",
                // clzEndTime: "string",
                endTime: this.ruleFormNB2.overDate,
                fxfx: this.ruleFormNB3.FXFX,
                // gb: "string",
                gdFormwork: this.XZMB,
                gdSort: this.ruleFormNB2.GDFL.toString(),
                gdTitle: this.ruleFormNB2.BT,
                // gdclhf: "string",
                // gdclhfCreateTime: "string",
                // gdclhfEndTime: "string",
                // gdsh: "string",
                // gdshCreateTime: "string",
                // gdshEndTime: "string",
                // gdsqgb: "string",
                // gdsqgbCreateTime: "string",
                // gdsqgbEndTime: "string",
                // gdxf: "string",
                gdxfBm: this.ruleFormNB2.region.toString(),
                // gdxfCreateTime: "string",
                // gdxfEndTime: "string",
                // gdzt: "string",
                gzcsjyq: this.ruleFormNB3.GZCS,
                // id: 0,
                // issuingDepartment: "string",
                // jsdw: "string",
                // nowStatus: "string",
                number: this.ruleFormNB2.BH,
                // pageNumber: 0,
                // pageSize: 0,
                qfr: this.ruleFormNB2.QFR,
                remarks: this.ruleFormNB3.BZXX,
                remindPeriod: this.ruleFormNB2.TXZQ,
                // runTime: "string",
                // rwsx: "string",
                // sendingTime: "string",
                shzy: this.ruleFormNB2.SH.toString(),
                startTime: this.ruleFormNB2.initDate,
                // zsdw: ,
              };
              console.log(this.ruleFormNB2.region, "region");
              addList(lists).then((res) => {
                console.log(res, "res");
              });

              console.log(lists, "lists");
            } else {
              this.$message({
                showClose: true,
                message: "请将数据填写完整",
                type: "warning",
              });
            }
          });

          console.log(
            this.ruleFormNB2,
            "this.ruleFormNB2this.ruleFormNB2this.ruleFormNB2"
          );
          console.log(
            this.ruleFormNB3,
            "this.ruleFormNB3this.ruleFormNB3this.ruleFormNB3"
          );

          setTimeout(() => {
            this.active = 4;
          }, 2000);
          break;
        case 3:
          console.log(this.ruleFormNB2, "1");
          console.log(this.ruleFormNB3, "2");
          console.log(this.ruleFormNB3, "3");
          console.log(this.GDradio, "4");
          break;
        default:
          alert("aa");
          break;
      }
    },
    // 完成
    nextOver() {
      this.active = 0;
      this.$emit("changeDialogShow");
      this.$parent.listVals();
    },
    // 上一步
    nextLast() {
      console.log(this.active, "this.active");
      if (this.active === 4) {
        alert("ss");
        this.active = 2;
      } else {
        this.active--;
      }
    },
    backAgentWork() {
      this.$emit("changeDialogShow");
      this.$parent.listVals();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-steps--vertical {
  padding: 20px 20px 20px 80px;
}

.radio_btn {
  margin-top: 20px;
  width: 300px;
  height: 600px;
  ::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
    width: 100px;
    text-align: center;
  }
}

.el-form-item {
  width: 446px;
}

.box_form {
  width: 1100px;
  height: 600px;
  padding: 20px;

  .el-radio-group {
    width: 800px;
  }
}

.box_four {
  ::v-deep .el-radio-button__inner {
    width: 300px !important;
    border-left: 1px solid #dcdfe6;
  }

  .el-radio-button {
    width: 800px;
  }
}

.el-row {
  margin-bottom: 20px;
}

.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0;
  margin-top: 20px;
}

.el-radio-group {
  width: 166px;
}

::v-deep .el-radio__input {
  display: none;
}

::v-deep .el-radio__input .is-checked {
}
</style>